<template>
	<div class="container">
		<el-card>
			<div slot="header">
				<!-- 面包屑 -->
				<el-breadcrumb separator-class="el-icon-arrow-right">
					<el-breadcrumb-item :to="{ path: '/home' }">首页</el-breadcrumb-item>
					<el-breadcrumb-item>个人设置</el-breadcrumb-item>
				</el-breadcrumb>
			</div>
			<el-row :gutter="15">
				<el-col :span="12">
					<el-form :model="profileForm" :rules="profileRules" ref="profileRef" label-width="100px">
						<el-form-item label="编号">
							<p>{{profileForm.id}}</p>
						</el-form-item>
						<el-form-item label="手机">
							<p>{{profileForm.mobile}}</p>
						</el-form-item>
						<el-form-item label="媒体名称" prop="name">
							<el-input v-model="profileForm.name"></el-input>
						</el-form-item>
						<el-form-item label="媒体介绍" prop="intro">
							<el-input type="textarea" v-model="profileForm.intro"></el-input>
						</el-form-item>
						<el-form-item label="邮箱" prop="email">
							<el-input v-model="profileForm.email"></el-input>
						</el-form-item>
						<el-form-item>
							<el-button type="primary" @click="updateInfo" :loading="infoLoading">提交修改</el-button>
						</el-form-item>
					</el-form>
				</el-col>
				<!-- 用户头像 -->
				<el-col :span="12" type="flex" align="middle">
					<label for="file">
						<el-avatar
							shape="square"
							:src="profileForm.photo"
							:size="150">
						</el-avatar>
					</label>
					<p style="margin-top: 15px;">点击修改头像</p>
					<input
						type="file"
						class="hidden"
						id="file"
						ref="fileRef"
						@change="fileChanged"
					/>
				</el-col>
			</el-row>
		</el-card>

		<!-- 修改头像对话框 -->
		<el-dialog
		  title="上传头像"
		  :visible.sync="updateDialogVisible"
		  width="50%"
			@opened="updateDialogOpened"
			>
			<div class="preview-image-wrapper">
				<img :src="previewImage" ref="priviewRef">
			</div>
		  <span slot="footer" class="dialog-footer">
		    <el-button @click="updateDialogVisible = false">取 消</el-button>
		    <el-button type="primary" @click="updateImage" :loading="loading">确 定</el-button>
		  </span>
		</el-dialog>

	</div>
</template>

<script>
	// 公交总线
	import bus from '@/utils/eventBus.js'
	// 引入裁剪样式
	import 'cropperjs/dist/cropper.css'
	// 引入裁剪
	import Cropper from 'cropperjs'
	import { getUserInfo, updateUserImage, updateUserInfo } from '@/api/user.js'

	export default {
		data () {
			// 邮箱正则表达式
			var checkedEmail = (rule, value, callback) => {
				const email = /^[a-zA-Z0-9_-]+@[a-zA-Z0-9_-]+(\.[a-zA-Z0-9_-]+)+$/
				if (email.test(value)) {
					callback()
				} else {
					callback(new Error('请再次输入正确的邮箱'))
				}
			}
			return {
				// 个人信息数据对象
				profileForm: {},
				// 个人信息验证对象
				profileRules: {
					name: [
						{ required: true, message: '请输入媒体名称', trigger: 'blur' },
						{ min: 3, max: 5, message: '长度在 1 到 7 个字符', trigger: 'blur' }
					],
					intro: [
						{ required: true, message: '请输入媒体介绍', trigger: 'blur' }
					],
					email: [
						{ required: true, message: '请输入邮箱', trigger: 'blur' },
						{ validator: checkedEmail, trigger: 'blur' }
					]
				},
				// 上传头像对话框显示控制
				updateDialogVisible: false,
				// 图片预览信息
				previewImage: '',
				// 修改头像加载
				loading: false,
				// 修改信息加载
				infoLoading: false
			}
		},
		created () {
			this._loadUserProfile()
		},
		methods: {
			// 加载用户信息
			_loadUserProfile () {
				getUserInfo().then(({ data: res }) => {
					this.profileForm = res.data
				}).catch(err => {
					this.$message.error('获取用户信息失败：' + err)
				})
			},
			// 用户上传了头像
			fileChanged () {
				// 获取文件 dom
				const file = this.$refs.fileRef
				// 获取 blob 数据
				const blobData = window.URL.createObjectURL(file.files[0])
				// 保存 blob 预览地址
				this.previewImage = blobData

				// 展示对话框
				this.updateDialogVisible = true
				// 清空 value 解决相同文件不触发事件
				this.$refs.fileRef.value = ''
			},
			// 上传头像对话框打开完毕事件
			updateDialogOpened () {
				// 图片裁剪切必须基于 img 进行初始化
				// 注意: img 必须是可见状态才能正常完成初始化

				// 获取图片 DOM
				const image = this.$refs.priviewRef

				// 如果有这个实例就替换图片
				if (this.cropper) {
					this.cropper.replace(this.previewImage)
					return
				}

				// 第一次初始化后， 如果预览的图片发生变化，裁切器默认不会更新
				// 如果预览图片发生变化:
				// 方式一： replace
				// 方式二： 销毁裁切器，重新初始化
				this.cropper = new Cropper(image, {
					// 图片大小一比一
					aspectRatio: 1,
					dragMode: 'none'
				})
			},
			// 更改用户头像
			updateImage () {
				this.loading = true

				// 获取裁剪后的blob
				this.cropper.getCroppedCanvas().toBlob(blob => {
					// 新建一个FormData对象
					const fd = new FormData()
					// 把图片地址添加的到FormData对象
					fd.append('photo', blob)

					// 发起请求
					updateUserImage(fd).then(({ data: res }) => {
						// 更新头像
						this.profileForm.photo = res.data.photo
						this.$message.success('修改头像成功！')
						// 关闭对话框
						this.updateDialogVisible = false
						// 关闭加载
						this.loading = false
						// 发布事件提示其他组件我更改了用户信息
						bus.$emit('updateInfo')
					}).catch(err => {
						this.$message.error('修改头像失败：' + err)
						// 关闭加载
						this.loading = false
					})
				})
			},
			// 更改用户信息
			updateInfo () {
				this.$refs.profileRef.validate(valid => {
					if (!valid) return this.$message.error('表单验证不通过！')

					// 打开加载
					this.infoLoading = true

					// 发起请求
					updateUserInfo({
						name: this.profileForm.name,
						intro: this.profileForm.intro,
						email: this.profileForm.email
					}).then(res => {
						// 关闭加载
						this.infoLoading = false
						this.$message.success('修改成功！')
						this._loadUserProfile()

						// 发布事件提示其他组件我更改了用户信息
						bus.$emit('updateInfo')
					}).catch(err => {
						// 关闭加载
						this.infoLoading = false
						this.$message.error('修改失败：' + err)
					})
				})
			}
		}
	}
</script>

<style scoped>

</style>
